<!-- 质押和赎回的弹框-->
<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { showFailToast } from "vant";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  modelValue: Boolean,
  title: {
    type: String,
    default: () => ""
  },
  maxValue: () => 0
});
const emit = defineEmits(["update", "confirm"]);
const isFocus = ref(false); //输入状态
const vol = ref("");
const closeDialog = () => {
  vol.value = "";
  emit("update:modelValue", false);
};
const confirmDialog = () => {
  if (!vol.value) {
    return showFailToast(t("transaction.pleaseEnterQuantity"));
  }

  if (parseFloat(vol.value) > props.maxValue) {
    return;
  }
  const num = vol.value;
  emit("confirm-opt", num);
  emit("update:modelValue", false);
  vol.value = "";
};
</script>
<template>
  <div>
    <div v-show="props.modelValue" class="div-dialog">
      <div class="div-dialog-bg" />
      <div class="dialog-content">
        <div class="text">{{ props.title }}</div>
        <div class="div-content">
          <div class="div-input">
            <van-field
              v-model="vol"
              type="number"
              :border="false"
              :placeholder="$t('transaction.pleaseEnterQuantity')"
              :class="isFocus ? 'focus-style' : ''"
              @focus="isFocus = true"
              @blur="isFocus = false"
            />
          </div>
        </div>
        <div class="div-footer">
          <div class="div-btn div-btn-cancel" @click.stop="closeDialog">
            {{ $t("home.cancel") }}
          </div>
          <div
            class="div-btn div-btn-sure"
            :class="maxValue && vol <= maxValue ? '' : 'btn-disabled'"
            @click.stop="confirmDialog"
          >
            {{ $t("home.confirm") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.div-dialog {
  position: fixed;
  width: 260px;
  left: calc(50% - 130px);
  top: 30%;
  z-index: 22;
  &-bg {
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    opacity: 0.7;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
  }
  .dialog-content {
    position: absolute;
    left: 0px;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    line-height: 20px;
    z-index: 1111;
    text-align: center;
    width: 100%;
    padding: 30px 10px 20px;
    border: 1px solid #24302d;
    opacity: 0.99;
    border-radius: 20px;
    background: linear-gradient(
      135deg,
      rgba(253, 253, 253, 0.22) 0%,
      rgba(253, 253, 253, 0.22) 0%,
      rgba(243, 243, 243, 0) 100%
    );
    :deep(.van-field) {
      margin: 0 auto 16px;
      border-bottom: 1px solid #e5f0f4;
      padding-left: 0px;
      background: none;
      .van-field__control {
        color: #fff;
        font-size: 14px;
      }
      &.focus-style {
        border-bottom: 1px solid #0064fb;
      }
    }
    .div-input {
      position: relative;
      .unit {
        position: absolute;
        right: 10px;
        bottom: 12px;
        color: #0065fc;
        font-weight: bold;
        font-size: 14px;
      }
    }
    .div-footer {
      margin-top: 20px;
      display: flex;
      justify-content: space-evenly;
      gap: 20px;
      .div-btn {
        height: 40px;
        background: #676b7c;
        border-radius: 8px;
        width: 120px;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        &-cancel {
          background-color: #676b7c;
        }
        &-sure {
          background: linear-gradient(57deg, #47ddc2 0%, #c1ffc8 100%);
        }
        &.btn-disabled {
          color: #5e6486;
          background: #3e436c;
        }
      }
    }
  }
}
</style>
